<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<link rel="stylesheet" href="./css/bootstrap.min.css">
  <script type="text/javascript" src="./js/jquery-3.1.1.min.js"></script>

  <style type="text/css">
	<style type="text/css">
	.hehe{
		margin-top: 10px;
	}
	.form-control{
		width: 30%;
	}
	.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
		}
    label{
      display: block;
    }
  .form-control{
    display: inline;
  }
	</style>
	<title>注册页面</title>
</head>
<body>
<div class="col-md-12">
	<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">留言板</a></li>
  <li role="presentation"><a href="../index.php">返回首页</a></li>
  <li role="presentation"><a href="./login.html">登录界面</a></li>
</ul>


<div class="container">

      <div class="starter-template">
          <form class="hehe" action="../register.php" method="post">
  <div class="form-group">
    <label for="exampleInputEmail1">邮箱</label> 
   <input type="text" class="form-control checkdata" id="mail" placeholder="邮箱" name="sex" is-check="0"><span class="info"></span>
   <!-- <span class="glyphicon glyphicon-remove" style="color:red" aria-hidden="true"></span> -->
  </div>
   <div class="form-group">
    <label for="exampleInputEmail1">昵称</label>
   <input type="text" class="form-control checkdata" placeholder="昵称" name="nikename" id="nike" is-check="0"><span class="info"></span>
  </div>
   <div class="form-group">
    <label for="exampleInputEmail1">用户名</label>
   <input type="text" class="form-control userinfo checkdata" placeholder="用户名" name="username" id="user" is-check="0"><span class="info"></span>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">密码</label>
    <input type="password" class="form-control checkdata" id="exampleInputPassword1" placeholder="密码" name="password" is-check="0"><span class="info"></span>
  </div>
    <div class="form-group">
    <label for="exampleInputPassword1">再次输入密码</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="密码" is-check='0' name="password"><span class="info"></span>
  </div>
  <button type="submit" class="btn btn-default" id="btn" disabled="">点击注册提交</button>
</form>
      </div>

    </div>
    <script type="text/javascript">
        $(function  () {
          $('.checkdata').blur(function(event) {
            checkval = $(this).val();
            checkindex = $(this).attr('name');
            str = "checkData = {"+checkindex+":checkval}";
            // console.log(str);
            eval(str);
            // console.log(checkData);
            checkobj = $(this);
           $.ajax({
             url: '../Aregister.php',
             type: 'post',
             dataType: 'json',
             data: checkData,
           })
           .done(function(data) {
              if (data.error==1) {
                checkobj.siblings('.info').html('<span class="glyphicon glyphicon-remove" style="color:red" aria-hidden="true"></span>'+data.info);
                  checkobj.attr('is-check',0);
                  
              }else{
                checkobj.siblings('.info').html('<span class="glyphicon glyphicon-ok" style="color:green" aria-hidden="true"></span>'+data.info);
                checkobj.attr('is-check',1);

                pass();
              }

           })
           .fail(function(data) {
             alert("失败");
           })
          }); 
            $('#exampleInputPassword2').blur(function(event) {
                passwords = $(this).val();
                password = $('#exampleInputPassword1').val();

                if(passwords==password && passwords!=''){
                  $(this).siblings('.info').html('<span class="glyphicon glyphicon-ok" style="color:green" aria-hidden="true"></span>'+"密码一致");
                     $(this).attr('is-check',1);
                     pass();
                }else{
                  $(this).siblings('.info').html('<span class="glyphicon glyphicon-remove" style="color:red" aria-hidden="true"></span>'+"密码不一致,或者为空");
                    $(this).attr('is-check',0);
                }

            });
              function pass(){
                num=0;
                // alert($('.hehe input').length);
                for (var i = 0; i < $('.hehe input').length; i++) {
                    checknum = $('.hehe input').eq(i).attr('is-check');
                    alert(checknum);
                    num+=parseInt(checknum);
                };
                // alert(num);
                if (num==5) {
                  $('#btn').attr('disabled',false);
                };
              }   
        })


    </script>
</body>
</html>